<template>
  <dv-border-box-12 class="networkSuccess">
    <screenTitle :title="title" width="62%"/>
    <div class="networkSuccess-content">
      <div class="network-scroll">
        <div class="city-scroll-content" ref="cityContent" @mouseenter="mouseIn" @mouseleave.stop="move">
          <div class="city-scroll" ref="cityScroll" :style="`margin-top: ${-scrollObj.marginTop}px`">
            <div v-for="item in cityList" class="city-item">
              <div class="city-name">
                <div>
                  <span>网络互连地: {{ item.name }}</span>
                </div>
              </div>
              <div class="network-number">
                <span>连接状态: {{ item.status }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </dv-border-box-12>
</template>

<script>
import screenTitle from './screenTitle'
import _ from 'lodash'

export default {
  name: 'networkSuccess',
  components:{
    screenTitle,
  },
  data(){
    return{
      title: '网络连接正常',
      scrollData:[
        { id: 'beijing', icon: 'beijing', name: '北京-广州', status: '连接正常'},
        { id: 'shanghai', icon: 'shanghai', name: '上海-北京', status: '连接正常'},
        { id: 'wuhan', icon: 'wuhan', name: '武汉-长沙', status: '连接正常'},
        { id: 'guangzhou', icon: 'guangzhou', name: '广州-上海', status: '连接正常'},
        { id: 'hangzhou', icon: 'hangzhou', name: '杭州-北京', status: '连接正常'},
        { id: 'tianjin', icon: 'tianjin', name: '天津-武汉', status: '连接正常'},
        { id: 'chengdu', icon: 'chengdu', name: '成都-西安', status: '连接正常'},
        { id: 'xian', icon: 'xian', name: '西安-深圳', status: '连接正常'},
      ],
      cityList: [],
      scrollObj:{
        Height: 130,
        marginTop: 0,
        temp: 1,
        contentHeight: 0,
      },
      timer: null,
    }
  },
  mounted () {
    this.init()
    this.move()
  },
  methods:{
    init(){
      this.cityList = _.cloneDeep(this.scrollData)
    },
    mouseIn(){
      clearTimeout(this.timer)
    },
    move(){
      clearTimeout(this.timer)
      if(this.cityList.length === 0){ return }
      this.scrollObj.marginTop += this.scrollObj.temp
      this.timer = setTimeout(()=>{
        if(this.scrollObj.marginTop > (this.$refs.cityContent.clientHeight - this.scrollObj.Height)){
          this.scrollObj.marginTop = 0
        }
        this.move()
      },50)
    },
  },
}
</script>

<style lang="scss" scoped>
.networkSuccess{
  width: 100%;
  height: 100%;
  box-shadow: inset 0px 0px 20px #b7f1f3;
  border-radius: 10px;
}
.networkSuccess-content{
  width: 90%;
  height:60%;
  margin: 5% auto 0;
  overflow: hidden;
}
.city-item{
  height: 50px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  line-height: 50px;
  margin:0 30px;
}
.city-name{
  display: flex;
}
</style>
